<template>
    <div class="p-cont" v-show="isShow">
         <div class="p-text">{{ message }}</div>
    </div>
</template>

<script>
export default {
    name: 'Toast',
     data() {
         return {
             message:'',
             isShow: false
         }
     },
     methods: {
         show(messageData = '默认值', time = 1000) {
            this.isShow = true
            this.message = messageData
            setTimeout(() => {
                this.isShow = false
                this.message = ''
            },time) // 默认时隔2s
         }
     }
}
</script>

<style scoped>
    .p-cont{
        width: 200px;
        height: 100px;
        border-radius: 5px;
        background-color: #666666c9;
        position: fixed;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        display: flex;
        justify-content : center;
        align-items : center;
        color: #fff;
        z-index: 1000;
    }
    .p-text{
       font-size: 18px;
    }
</style>